/*
 * @Descripttion: 路由配置文件
 * @version:
 * @Author: lhl
 * @Date: 2024-09-01 20:44:16
 * @LastEditors: lhl
 * @LastEditTime: 2024-09-04 11:09:23
 */
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import NProgress from '@/utils/nprogress';
// 移动端首页一般不做懒加载
import Home from '@/views/Home.vue';
import Layout from '@/layout/Index.vue';

const routes: Array<RouteRecordRaw> = [
  {
    redirect: '/',
    path: '/home'
  },
  {
    path: '/',
    component: Layout,
    children: [
      {
        path: '',
        name: 'Home',
        component: Home, // 默认子路由，可以是任何您希望在 Layout 中显示的组件
        meta: {
          title: '首页',
          keepAlive: true,
          showTabbar: true, // 是否显示底部导航栏
          showHeader: true // 是否显示顶部导航栏
        }
      },
      {
        path: '/car',
        name: 'Car',
        component: () => import('@/views/car/Index.vue'),
        meta: {
          title: '购物车',
          keepAlive: true,
          showTabbar: true, // 是否显示底部导航栏
          showHeader: true // 是否显示顶部导航栏
        }
      },
      {
        path: '/order',
        name: 'Order',
        component: () => import('@/views/order/Index.vue'),
        meta: {
          title: '订单',
          keepAlive: true,
          showTabbar: true, // 是否显示底部导航栏
          showHeader: true // 是否显示顶部导航栏
        }
      },
      {
        path: '/my',
        name: 'My',
        component: () => import('@/views/my/Index.vue'),
        meta: {
          title: '我的',
          keepAlive: true,
          showTabbar: true, // 是否显示底部导航栏
          showHeader: true // 是否显示顶部导航栏
        }
      }
    ]
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/Login.vue')
  },
  {
    // vue-router@4的变化，舍弃*通配符 放在最后
    // 官方文档：https://next.router.vuejs.org/zh/guide/migration/index.html#%E5%88%A0%E9%99%A4%E4%BA%86-%EF%BC%88%E6%98%9F%E6%A0%87%E6%88%96%E9%80%9A%E9%85%8D%E7%AC%A6%EF%BC%89%E8%B7%AF%E7%94%B1
    path: '/:pathMatch(.*)*',
    name: '404',
    component: () => import('@/views/404.vue')
  }
];

const router = createRouter({
  // createWebHashHistory() hash模式带 # 符号，createWebHistory() 无 # 符号
  // 注意：如果使用 history 模式，需要后端配置支持，否则刷新页面会导致路由丢失
  history: createWebHistory(),
  routes,
  // ts没有用到 from参数 所以加个下划线 变成成占位符 用到时候在写成 form 防止 ts/eslint 报错
  scrollBehavior(to, _from, savedPosition) {
    // 如果有 hash，滚动到 hash 位置
    if (to.hash) {
      return {
        el: to.hash,
        // scrollBehavior 的 behavior: 'smooth' 属性依赖于浏览器的平滑滚动支持。如果浏览器不支持平滑滚动，将会使用默认的滚动行为
        behavior: 'smooth'
      };
    }
    // 如果有缓存位置，滚动到缓存位置
    if (savedPosition) {
      return savedPosition;
    }
    // 否则，滚动到顶部
    return { top: 0, left: 0, behavior: 'smooth' };
  }
});

router.beforeEach((to, _from, next) => {
  // 其他一些业务逻辑
  // 设置页面标题
  const pageTitle = typeof to.meta.title === 'string' ? to.meta.title : 'Default Title';
  document.title = pageTitle;
  NProgress.start();
  next();
});

// 本身接受 to form 参数，但是没有用到
router.afterEach(() => {
  NProgress.done();
});

export default router;
